<!DOCTYPE html>
<html lang='en'>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta charset='utf-8'/>
    <style>
        #scheduling {
            display: flex;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        #scheduling div {
            margin: 2px;
            text-align: center;
            background-color: #e6e5e5;
            line-height: 50px;
            width: 15%;
        }

        #scheduling div.on {
            color: white;
            background-color: #c53737;
        }
    </style>
</head>
<body>
<h2>倒计时，<span style='color: #19c721'>hourSet小时</span>，<span style='color: #c53737'>remainMinute分钟</span>后断电</h2>
<h2>循环定时，通电时间<span style='color: #19c721'>hourSet</span>，当前第<span style='color: #c53737'>remainMinute</span>小时</h2>
<h3><a href='/?h=1'>定时1小时</a></h3>
<h3><a href='/?h=2'>定时2小时</a></h3>
<h3><a href='/?h=3'>定时3小时</a></h3>
<h3><a href='/?h=4'>定时4小时</a></h3>
<h3><a href='/?h=5'>定时5小时</a></h3>
<h3><a href='/?h=6'>定时6小时</a></h3>
<h3><a href='/?h=8'>定时8小时</a></h3>
<h3><a href='/?h=10'>定时10小时</a></h3>
<h3><a href='/?h=12'>定时12小时</a></h3>

<div></div>
<div id="scheduling"></div>
<div style="margin-top: 20px; display: flex; align-items: center;">
    <input type="checkbox" id="loop" style="height: 24px; width: 24px;"><span>循环定时</span>
    <button onclick="updateHours()" style="width: 120px; line-height: 60px; margin-left: 30px;">设置</button>
</div>
<script>
  var hours = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

  function showSchedulingDom() {
    var html = "";
    hours.forEach((h, i) => {
      if (h > 0) {
        html += `<div class="on" onClick="setHour(${i})">${i + 1}</div>`;
      } else {
        html += `<div onClick="setHour(${i})">${i + 1}</div>`;
      }
    });
    document.getElementById("scheduling").innerHTML = html;
  }

  showSchedulingDom();

  function setHour(i) {
    console.log("i", i);
    
    hours[i] = 1 - hours[i];
    console.log(hours);
    
    showSchedulingDom();
  }
  function updateHours() {
    var loop = document.getElementById("loop").checked?"1":"0";
    var a = "/?s="+hours.join("")+"&loop="+loop;
    console.log(a);
    
  }
</script>
</body>
</html>
